<template>
  <div>
    <section class="swiper">
      <swiper :list="swiper_list" v-model="swiper_index"></swiper>
    </section>
    <section class="menu">
      <grid :show-lr-borders="false" :show-vertical-dividers="false">
        <grid-item  link="/recognize">
          <img slot="icon" src="../assets/img/logo.png">
          <span slot="label">认筹</span>
        </grid-item>
        <grid-item @click.native="onDev">
          <img slot="icon" src="../assets/img/logo.png">
          <span slot="label">签到</span>
        </grid-item>
        <grid-item @click.native="onDev">
          <img slot="icon" src="../assets/img/logo.png">
          <span slot="label">抽奖</span>
        </grid-item>
      </grid>
      <grid :show-lr-borders="false" :show-vertical-dividers="false">
        <grid-item @click.native="onDev">
          <img slot="icon" src="../assets/img/logo.png">
          <span slot="label">矿机</span>
        </grid-item>
        <grid-item @click.native="onDev">
          <img slot="icon" src="../assets/img/logo.png">
          <span slot="label">钱包</span>
        </grid-item>
        <grid-item link="/news">
          <img slot="icon" src="../assets/img/logo.png">
          <span slot="label">资讯</span>
        </grid-item>
      </grid>
    </section>
    <section class="notice">
      <span class="to_list" @click="goNoticeList">公告列表</span>
      <swiper auto height="30px" direction="vertical" :interval=2000 class="text-scroll" :show-dots="false">
        <swiper-item
          v-for="i in notice_list"
          :key="i.article_id"
          @click.native="goNoticeDetail(i.article_id)">
          <p>{{i.title}}</p>
        </swiper-item>
      </swiper>
    </section>
    <section class="img-section" style="line-height: 1;font-size: 0">
      <img src="https://o5omsejde.qnssl.com/demo/test1.jpg" style="width: 100%;height: 100px;margin-bottom: 10px" alt="">
      <img src="https://o5omsejde.qnssl.com/demo/test2.jpg" style="width: 100%;height: 100px;margin-bottom: 10px" alt="">
      <img src="https://o5omsejde.qnssl.com/demo/test3.jpg" style="width: 100%;height: 100px" alt="">
    </section>
    <div class="mask" v-if="showMask">
      <div style="width: 60vw;height: 300px;margin: 0 auto;background-color: #fff;margin-top: 20vh;padding: 20px;text-align: center;position: relative">
        <p>轻松认筹</p>
        <x-button :gradients="buttonColor" @click.native="goRecognize">认筹</x-button>
        <span class="close-btn" @click="closeMask">X</span>
      </div>
    </div>
  </div>
</template>

<script>
  import { Swiper, SwiperItem, Grid, GridItem, XImg, XButton } from 'vux'
  const baseList = [{
    url: 'javascript:',
    img: 'https://o5omsejde.qnssl.com/demo/test2.jpg'
  }, {
    url: 'javascript:',
    img: 'https://o5omsejde.qnssl.com/demo/test3.jpg'
  }, {
    url: 'javascript:',
    img: 'https://o5omsejde.qnssl.com/demo/test1.jpg'
  }]
  export default {
    name: 'home',
    components: {
      Swiper, SwiperItem, Grid, GridItem, XImg, XButton
    },
    data () {
      return {
        showMask: false,
        notice_list: [],
        buttonColor: ['#1D62F0', '#19D5FD'],
        swiper_list: baseList,
        swiper_index: 0,
        list: [
          'https://o5omsejde.qnssl.com/demo/test1.jpg',
          'https://o5omsejde.qnssl.com/demo/test2.jpg'
        ]
      }
    },
    created () {
      // 初始化
      this.init()
    },
    methods: {
      init () {
        let vue = this
        vue.$localStorage.fetch('hasVisited') ? vue.showMask = false : vue.showMask = true
        vue.$localStorage.save('hasVisited', true)
        this.getNoticeList()
      },
      // 去认筹
      goRecognize () {
        this.$router.push({path: '/recognize'})
      },
      // 获取公告列表
      getNoticeList () {
        let vue = this
        vue.get({
          url: '/api/index/notice_list',
          success: function (data) {
            vue.notice_list = data.data
            console.log(data.data)
          }
        })
      },
      goNoticeList () {
        this.$router.push({path: '/notice'})
      },
      // 去公告详情
      goNoticeDetail (id) {
        console.log(id)
        this.$router.push({path: '/noticedetail', query: {id: id}})
      },
      onDev () {
        this.$vux.toast.show({
          text: '正在开发中',
          type: 'text',
          position: 'middle'
        })
      },
       // 关闭认筹框
      closeMask () {
        this.showMask = false
      }
    }
  }
</script>

<style lang="less" scoped>
  .menu {
    background-color: #fff;
    text-align: center;
    padding: 0 15px;
  }
  .weui-grids:before {
    content: none!important;
  }
  .weui-grid:after {
    content: none!important;
  }
  .notice {
    background-color: #fff;
    margin: 10px 0;
    box-sizing: border-box;
    padding: 4px 15px 4px 84px;
    position: relative;
    .to_list {
      position: absolute;
      top: 6px;
      left: 10px;
    }
    .text-scroll p {
      font-size: 14px;
      text-align: left;
      line-height: 30px;
    }
  }
  .mask {
    position: fixed;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    background-color: rgba(0,0,0,.4);
    z-index: 1024;
    .close-btn {
      display: inline-block;
      width: 20px;
      height: 20px;
      border: 1px solid #fff;
      line-height: 20px;
      border-radius: 50%;
      position: absolute;
      bottom: -40px;color: #fff
    }
  }
</style>
